<template>
  <div >
     <el-menu
     style="height: 100%"
     default-active="1"
     class="el-menu-vertical-demo"
     @open="handleOpen"
     @close="handleClose"
     background-color="#545c64"
     text-color="#fff"
     active-text-color="#ffd04b">

      <div v-for="(val,i) in menuLst" :key="val.sort">
        <el-submenu :index = "val.sort" style="text-align: left;padding: 0 40px">
          <template slot="title">
           <i :class="val.class" ></i>
           <span>{{val.name}}</span>
           </template>
              <div  v-for="(son,i) in val.sonMenu" :key="son.sort">
                 <div v-if="son.sonMenu">
                    <el-submenu :index="son.sort">
                      <template slot="title">{{son.name}}</template>
                          <div v-for="(grandSon,i) in son.sonMenu" :key="grandSon.sort">
                            <el-menu-item @click="menuClick(grandSon.router)" :index="grandSon.sort">{{grandSon.name}}</el-menu-item>
                          </div>
                    </el-submenu>
                     </div>
                    <div v-else>
                        <el-menu-item @click="menuClick(son.router)" :index="son.sort">{{son.name}}</el-menu-item>
                    </div>
              </div>
         </el-submenu>
     </div>

     </el-menu>
  </div>
</template>

<script>
export default {
  name: 'left',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      menuLst: [
       {class:"el-icon-location",sort:"1",name:"基础架构",sonMenu:[{sort:"1-1",name:"主机",router:"OperationPlatform"},{sort:"1-2",name:"容器",router:"HelloWorld"},{sort:"1-3",name:"存储",router:"HelloWorld"}]}
      ,{class:"el-icon-menu",    sort:"2",name:"我的文件",sonMenu:[{sort:"2-1",name:"文件检索",router:"SearchFile"},{sort:"2-2",name:"测试框架",router:"TestFrame"},{sort:"2-3",name:"审计日志",router:"HelloWorld"}]}
      ,{class:"el-icon-document",sort:"3",name:"应用"    ,sonMenu:[{sort:"3-1",name:"全部",router:"HelloWorld"},{sort:"3-2",name:"用户",router:"HelloWorld"},{sort:"3-3",name:"基础设置",router:"HelloWorld"}]}
      ]
    }
  },
  methods:{
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      menuClick(router){
        if(router != this.$route.name){
        this.$router.push({name:router})
        }
      }
  }
}
</script>